<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The ListView control provides the infrastructure to display a set of data items in different layouts or views.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>ListView - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .node > .data {
            width: 240px!important;
        }
        .node-data.item-data-date {
            width: 120px!important;
        }
        .node-data.item-data-name {
            width: 200px!important;
        }
    </style>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">ListView</a></li>
                    <li class="toc-entry"><a href="#_listview_about">About</a></li>
                    <li class="toc-entry"><a href="#_listview_node">Add item</a></li>
                    <li class="toc-entry"><a href="#_listview_view">View types</a></li>
                    <li class="toc-entry"><a href="#_listview_grouping">Grouping</a></li>
                    <li class="toc-entry"><a href="#_listview_selectable">Selectable</a></li>
                    <li class="toc-entry"><a href="#_listview_events">Events</a></li>
                    <li class="toc-entry"><a href="#_listview_methods">Methods</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>ListView</h1>
                <p class="text-leader">
                    The ListView control provides the infrastructure to display a set of data items in different layouts or views.
                </p>

                <!-- ads-html -->

                <h3 id="_listview_about">About</h3>
                <p>
                    To creating <code>listview</code> we use <code>&lt;ul&gt;</code> element with role <code>data-role="listview"</code>.
                    The items are defined with <code>&lt;li&gt;</code> element.
                    A list can have multiple views: <code>list</code>, <code>content</code>, <code>icons</code>,  <code>icons-small</code>, <code>icons-large</code> and <code>tiles</code>.
                </p>
                <div class="example">
                    <ul data-role="listview" data-view="list" data-select-node="true">
                        <li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
                        <li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
                        <li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
                        <li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
                        <li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
                        <li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini"></li>
                        <li data-icon="images/setup.png" data-caption="setup.exe"></li>
                        <li data-icon="<span class='mif-file-empty'>" data-caption="file1.dat"></li>
                    </ul>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="listview"&gt;
                    ...
                    &lt;/ul&gt;
                </code></pre>

                <h3 id="_listview_node">Add item</h3>
                <p>
                    Each listview <code>item</code> are defined with <code>&lt;li&gt;</code> element and special attributes for it: <code>data-icon</code>, <code>data-caption</code>.
                </p>
                <pre><code class="html">
                    &lt;li data-icon="&lt;span class='mif-file-empty'&gt;" data-caption="desktop.ini"&gt;&lt;/li&gt;
                    &lt;li data-icon="images/setup.png" data-caption="setup.exe"&gt;&lt;/li&gt;
                </code></pre>
                <p>
                    To create <code>icon</code> you can define <code>tag</code> (for font icons) or path to image for <code>&lt;img&gt;</code>.
                </p>

                <h3 id="_listview_view">View types</h3>
                <p>
                    A <code>listview</code> can have multiple views. To set view type use attribute <code>data-view="..."</code> with values:
                        <code>list</code> (default),
                        <code>content</code>,
                        <code>tiles</code>,
                        <code>icons</code>,
                        <code>icons-medium</code> or
                        <code>icons-large</code>. You can change this attribute at runtime to change listview view.
                </p>
                <div class="example">
                    <div class="p-4 bg-light d-flex flex-justify-between">
                        <input type="radio" name="r1" value="list" data-role="radio" data-caption="List" title="">
                        <input type="radio" name="r1" value="table" data-role="radio" data-caption="Table" checked="checked"  title="">
                        <input type="radio" name="r1" value="content" data-role="radio" data-caption="Content" title="">
                        <input type="radio" name="r1" value="tiles" data-role="radio" data-caption="Tiles" title="">
                        <input type="radio" name="r1" value="icons" data-role="radio" data-caption="Icons" title="">
                        <input type="radio" name="r1" value="icons-medium" data-role="radio" data-caption="Medium icons" title="">
                        <input type="radio" name="r1" value="icons-large" data-role="radio" data-caption="Large icons" title="">
                    </div>
                    <div class="border bd-light p-4">
                        <ul data-role="listview" data-view="table" id="listview-1" data-select-node="true" data-structure='{"date": true, "name": true}'>
                            <li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video" data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>" data-date="12/21/2017" data-name="Video library"></li>
                            <li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images" data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>" data-date="12/21/2017" data-name="My images"></li>
                            <li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents" data-content="<div class='mt-1' data-role='progress' data-value='24' data-small='true'>" data-date="12/21/2017" data-name="My documents"></li>
                            <li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads" data-content="<div class='mt-1' data-role='progress' data-value='85' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
                            <li data-icon="<span class='mif-folder'>" data-caption="Desktop" data-content="<div class='mt-1' data-role='progress' data-value='10' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
                            <li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini" data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
                            <li data-icon="images/setup.png" data-caption="setup.exe" data-content="<span class='text-muted'>Executable</span>"></li>
                            <li data-icon="<span class='mif-file-empty'>" data-caption="file1.dat" data-content="<span class='text-muted'>Data file</span>"></li>
                        </ul>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="listview" data-view="tiles"&gt;
                    ...
                    &lt;ul&gt;
                </code></pre>

                <h4 id="_listview_view_content">View as content</h4>
                <p>
                    For <code>content</code> view, you can define additional data with attribute <code>data-content="..."</code>.
                    Value for this attribute must be simple string or valid html. Also supports Metro 4 components definition.
                </p>
                <div class="example">
                    <ul data-role="listview" data-view="content" data-select-node="true">
                        <li data-icon="<span class='mif-folder fg-orange'>"
                            data-caption="Video"
                            data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>"></li>
                        <li data-icon="<span class='mif-folder fg-cyan'>"
                            data-caption="Images"
                            data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>"></li>
                        <li data-icon="<span class='mif-file-empty'>"
                            data-caption="desktop.ini"
                            data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
                        <li data-icon="images/setup.png"
                            data-caption="setup.exe"
                            data-content="<span class='text-muted'>Executable</span>"></li>
                        <li data-icon="<span class='mif-file-empty'>"
                            data-caption="file1.dat"
                            data-content="<span class='text-muted'>Data file</span>"></li>
                    </ul>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="listview" data-view="content" data-select-node="true"&gt;
                        &lt;li data-icon="&lt;span class='mif-folder fg-orange'&gt;"
                            data-caption="Video"
                            data-content="&lt;div class='mt-1' data-role='progress' data-value='35' data-small='true'&gt;"&gt;&lt;/li&gt;
                        &lt;li data-icon="&lt;span class='mif-folder fg-cyan'&gt;"
                            data-caption="Images"
                            data-content="&lt;div class='mt-1' data-role='progress' data-value='78' data-small='true'&gt;"&gt;&lt;/li&gt;
                        &lt;li data-icon="&lt;span class='mif-file-empty'&gt;"
                            data-caption="desktop.ini"
                            data-content="&lt;span class='text-muted'&gt;Created: 12.21.2017&lt;/span&gt;"&gt;&lt;/li&gt;
                        &lt;li data-icon="images/setup.png"
                            data-caption="setup.exe"
                            data-content="&lt;span class='text-muted'&gt;Executable&lt;/span&gt;"&gt;&lt;/li&gt;
                        &lt;li data-icon="&lt;span class='mif-file-empty'&gt;"
                            data-caption="file1.dat"
                            data-content="&lt;span class='text-muted'&gt;Data file&lt;/span&gt;"&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>

                <h4 id="_listview_view_table">View as table</h4>
                <p>
                    For <code>table</code> view, you must define additional structure for items with attribute <code>data-structure="{...}"</code>.
                    Value for this attribute must be valid json object stored as string.
                    This structure define additional columns. Each item in structure writes as key/value, where key is a name for additional field and value can be true or false.
                    True - field displayed, false - filed not displayed.
                    Now for each listview item you can set additional fields with data attribute <code>data-key_name="..."</code> where key is a key from structure data.
                </p>
                <div class="example">
                    <ul data-role="listview" data-view="table" data-select-node="true" data-structure='{"date": true, "name": true}'>
                        <li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video" data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>" data-date="12/21/2017" data-name="Video library"></li>
                        <li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images" data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>" data-date="12/21/2017" data-name="My images"></li>
                        <li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents" data-content="<div class='mt-1' data-role='progress' data-value='24' data-small='true'>" data-date="12/21/2017" data-name="My documents"></li>
                        <li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads" data-content="<div class='mt-1' data-role='progress' data-value='85' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
                        <li data-icon="<span class='mif-folder'>" data-caption="Desktop" data-content="<div class='mt-1' data-role='progress' data-value='10' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
                        <li data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini" data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
                        <li data-icon="images/setup.png" data-caption="setup.exe" data-content="<span class='text-muted'>Executable</span>"></li>
                        <li data-icon="<span class='mif-file-empty'>" data-caption="file1.dat" data-content="<span class='text-muted'>Data file</span>"></li>
                    </ul>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="listview"
                        data-view="table"
                        data-select-node="true"
                        data-structure='{"date": true, "name": true}'&gt;

                        &lt;li data-icon="&lt;span class='mif-folder fg-orange'&gt;"
                            data-caption="Video"
                            data-date="12/21/2017"
                            data-name="Video library"&gt;&lt;/li&gt;

                        &lt;li data-icon="&lt;span class='mif-folder fg-cyan'&gt;"
                            data-caption="Images"
                            data-date="12/21/2017"
                            data-name="My images"&gt;&lt;/li&gt;

                    &lt;/ul&gt;
                </code></pre>
                <p class="remark">
                    You can set styles for additional items. Each additional item stored in element with classes <code>.node-data</code> + <code>.item-data-key_name</code>.
                </p>

                <!-- ads-html -->

                <h3 id="_listview_grouping">Grouping</h3>
                <p>
                    Component <code>listview</code> is supports a <strong>one level grouping</strong> of items.
                    To create <code>grouping</code> you must place list of items to second level. It's all.
                </p>
                <div class="example">
                    <div class="p-4 bg-light d-flex flex-justify-between">
                        <input type="radio" name="r2" value="list" data-role="radio" data-caption="List" title="">
                        <input type="radio" name="r2" value="content" data-role="radio" data-caption="Content" title="">
                        <input type="radio" name="r2" value="tiles" data-role="radio" data-caption="Tiles" title="">
                        <input type="radio" name="r2" value="icons" data-role="radio" data-caption="Icons" title="">
                        <input type="radio" name="r2" value="icons-medium" data-role="radio" data-caption="Medium icons" checked title="">
                        <input type="radio" name="r2" value="icons-large" data-role="radio" data-caption="Large icons" title="">
                    </div>
                    <div class="border bd-light p-4">
                        <ul data-role="listview" id="listview-2" data-view="icons-medium" data-select-node="true">
                            <li data-caption="Folders">
                                <ul>
                                    <li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
                                    <li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
                                    <li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
                                    <li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
                                    <li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
                                </ul>
                            </li>
                            <li data-caption="Devices and disks">
                                <ul>
                                    <li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
                                    <li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
                                    <li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
                                    <li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
                                    <li data-icon="images/disk-network.png" data-caption="Network"></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="listview" data-view="icons-medium"&gt;
                        &lt;li data-caption="Folders"&gt;
                            &lt;ul&gt;
                                &lt;li data-icon="&lt;span class='mif-folder fg-orange'&gt;" data-caption="Video"&gt;&lt;/li&gt;
                                &lt;li data-icon="&lt;span class='mif-folder fg-cyan'&gt;" data-caption="Images"&gt;&lt;/li&gt;
                                &lt;li data-icon="&lt;span class='mif-folder fg-green'&gt;" data-caption="Documents"&gt;&lt;/li&gt;
                                &lt;li data-icon="&lt;span class='mif-folder-download fg-blue'&gt;" data-caption="Downloads"&gt;&lt;/li&gt;
                                &lt;li data-icon="&lt;span class='mif-folder'&gt;" data-caption="Desktop"&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li data-caption="Devices and disks"&gt;
                            &lt;ul&gt;
                                &lt;li data-icon="images/disk-os.png" data-caption="System (C:)"&gt;&lt;/li&gt;
                                &lt;li data-icon="images/disk.png" data-caption="DS1 (D:)"&gt;&lt;/li&gt;
                                &lt;li data-icon="images/disk.png" data-caption="DS2 (E:)"&gt;&lt;/li&gt;
                                &lt;li data-icon="images/disk.png" data-caption="FreeAgent (G:)"&gt;&lt;/li&gt;
                                &lt;li data-icon="images/disk-network.png" data-caption="Network"&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                </code></pre>
                <p>
                    If you need to create collapsing node, add attribute <code>data-collapsed="true"</code> to item definition.
                </p>

                <h3 id="_listview_selectable">Selectable</h3>
                <p>
                    Attribute <code>data-selectable</code> enable or disable <code>selectable</code> mode for <code>listview</code>.
                    You can change this attribute at runtime.
                    Each checkbox linked with listview item on data attribute <code>node</code>.
                </p>
                <div class="example">
                    <div class="p-4 bg-light d-flex flex-justify-between">
                        <input data-role="switch" data-caption="Enable selectable" title="" onclick="var lv = $('#listview-3'); $(this).is(':checked') ? lv.attr('data-selectable', true) : lv.attr('data-selectable', false)">
                        <input name="r3" value="list" data-role="radio" data-caption="List" checked title="">
                        <input name="r3" value="content" data-role="radio" data-caption="Content" title="">
                        <input name="r3" value="tiles" data-role="radio" data-caption="Tiles" title="">
                        <input name="r3" value="icons" data-role="radio" data-caption="Icons" title="">
                        <input name="r3" value="icons-medium" data-role="radio" data-caption="Medium icons"  title="">
                        <input name="r3" value="icons-large" data-role="radio" data-caption="Large icons" title="">
                    </div>
                    <div class="border bd-light p-4">
                        <ul data-role="listview" id="listview-3" data-view="list" data-select-node="true" data-selectable="false" data-select-current="false">
                            <li data-icon="<span class='mif-folder fg-orange'>" data-caption="Video"></li>
                            <li data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images"></li>
                            <li data-icon="<span class='mif-folder fg-green'>" data-caption="Documents"></li>
                            <li data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads"></li>
                            <li data-icon="<span class='mif-folder'>" data-caption="Desktop"></li>
                            <li data-caption="Devices and disks">
                                <ul>
                                    <li data-icon="images/disk-os.png" data-caption="System (C:)"></li>
                                    <li data-icon="images/disk.png" data-caption="DS1 (D:)"></li>
                                    <li data-icon="images/disk.png" data-caption="DS2 (E:)"></li>
                                    <li data-icon="images/disk.png" data-caption="FreeAgent (G:)"></li>
                                    <li data-icon="images/disk-network.png" data-caption="Network"></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;ul data-role="listview" data-selectable="true"&gt;
                    ...
                    &lt;/ul&gt;
                </code></pre>

                <h3 id="_listview_events">Events</h3>
                <p>
                    When <code>listview</code> works, it generated the numbers of events. You can use callback for this events to behavior with <code>listview</code>.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>onNodeClick(node)</td>
                        <td><code>data-on-node-click</code></td>
                        <td>Fired when user click on node caption</td>
                    </tr>
                    <tr>
                        <td>onNodeDblClick(node)</td>
                        <td><code>data-on-node-dblclick</code></td>
                        <td>Fired when user dblclick on node caption</td>
                    </tr>
                    <tr>
                        <td>onNodeInsert(node)</td>
                        <td><code>data-on-node-insert</code></td>
                        <td>Fired when node was inserted</td>
                    </tr>
                    <tr>
                        <td>onNodeDelete(node)</td>
                        <td><code>data-on-node-delete</code></td>
                        <td>Fired when node was deleted</td>
                    </tr>
                    <tr>
                        <td>onNodeClean(node)</td>
                        <td><code>data-on-node-clean</code></td>
                        <td>Fired when node was cleaned</td>
                    </tr>
                    <tr>
                        <td>onGroupNodeClick(state, check, node)</td>
                        <td><code>data-on-radio-click</code></td>
                        <td>Fired when user click on radio input</td>
                    </tr>
                    <tr>
                        <td>onExpandNode(node)</td>
                        <td><code>data-on-expand-node</code></td>
                        <td>Fired when node was expanded</td>
                    </tr>
                    <tr>
                        <td>onCollapseNode(node)</td>
                        <td><code>data-on-collapse-node</code></td>
                        <td>Fired when node was collapsed</td>
                    </tr>
                    <tr>
                        <td>onListviewCreate()</td>
                        <td><code>data-on-listview-create</code></td>
                        <td>Fired when node was created</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_listview_methods">Methods</h3>
                <p>
                    You can use <code>listview</code> methods to interact with the component at runtime.
                </p>
                <ul>
                    <li><strong>toggleNode(node)</strong> - toggle node state</li>
                    <li><strong>add(parent, data)</strong> - add node</li>
                    <li><strong>addGroup(data)</strong> - add group</li>
                    <li><strong>insertBefore(node, data)</strong> - add new node before specified node</li>
                    <li><strong>insertAfter(node, data)</strong> - add new node after specified node</li>
                    <li><strong>del(node)</strong> - delete node from tree</li>
                    <li><strong>clean(node)</strong> - clean node</li>
                    <li><strong>getSelected()</strong> - get selected nodes</li>
                </ul>
                <div class="example">
                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').addGroup({
                            caption: 'Group'
                        })
                    ">Add group</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').add(null, {
                            caption: 'New node',
                            icon: '<span class=\'mif-air\'>'
                        })
                    ">Add node</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        var t = lv.find('.current-group').length > 0 ? lv.find('.current-group') : $(lv.find('.node-group')[0]);
                        lv.data('listview').add(t, {
                            caption: 'Sub item',
                            icon: '<span class=\'mif-folder\'>'
                        })
                    ">Add SubItem</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').insertBefore(lv.find('.current'), {
                            caption: 'Before node',
                            icon: '<span class=\'mif-folder\'>'
                        })
                    ">Insert before</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').insertAfter(lv.find('.current'), {
                            caption: 'After node',
                            icon: '<span class=\'mif-folder\'>'
                        })
                    ">Insert after</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').del(lv.find('.current'))
                    ">Delete item</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').del(lv.find('.current-group'))
                    ">Delete group</button>

                    <button class="button" onclick="
                        var lv = $('#lv_1');
                        lv.data('listview').clean(lv.find('.current-group'))
                    ">Clean</button>

                    <hr>

                    <ul data-role="listview" id="lv_1" data-select-node="true" data-view="icons-medium"></ul>
                </div>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <script>
        $("input[name=r1]").on("click", function(){
            var checked = $(this).is(":checked");
            if (checked) {
                $("#listview-1").data("listview").view(this.value);
            }
        });
        $("input[name=r2]").on("click", function(){
            var checked = $(this).is(":checked");
            if (checked) {
                $("#listview-2").data("listview").view(this.value);
            }
        });
        $("input[name=r3]").on("click", function(){
            var checked = $(this).is(":checked");
            if (checked) {
                $("#listview-3").data("listview").view(this.value);
            }
        });
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>